<template>
  <div style="height: 100vh; width: 100%" v-if="isLoading" class="bg">
    <dv-loading>Loading...</dv-loading>
  </div>
  <div v-else>
    <el-container class="bg">
      <el-header>
        <span class="nowtime">{{ nowTime }}</span>
        <top-header />
      </el-header>
      <el-main>
        
         <div class="main-content">
          <el-row :gutter="20">
            <el-col :span="7">
              <div class="grid-content bg-purple">
                <UserRoles />
                <ArtistWork />
              </div>
            </el-col>
            <el-col :span="9">
              <div class="grid-content bg-purple">
                 <dv-decoration-7 style="width:100%;height:30px;margin-top: 25px">订单状况统计</dv-decoration-7>
                 <DataOverview />
                <Comments />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                 <PurchaseType />
                 <UploadWork />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import topHeader from "@/views/Visualization/topHeader";
import UserRoles from "@/views/Visualization/UserRoles";
import PurchaseType from "@/views/Visualization/PurchaseType";
import ArtistWork from "@/views/Visualization/ArtistWork";
import DataOverview from "@/views/Visualization/DataOverview";
import Comments from "@/views/Visualization/Comments";
import UploadWork from "@/views/Visualization/UploadWork";


export default {
  name: "index",
  components: { topHeader, UserRoles,PurchaseType,ArtistWork,DataOverview,Comments,UploadWork },
  data() {
    return {
      timer: "", //定义一个定时器
      nowTime: "",
      isLoading: true,
      yearData: {},
    };
  },
  mounted() {
    // productPowerReportByYear().then(response => {
    //   this.yearData  = response.rows[0]
    // });
    this.getTime();
    this.cancelLoading();
  },
  methods: {
    getTime() {
      this.timer = setInterval(() => {
        let timeDate = new Date();
        let year = timeDate.getFullYear();
        let mounth = timeDate.getMonth() + 1;
        let day = timeDate.getDate();
        let hours = timeDate.getHours();
        hours = hours >= 10 ? hours : "0" + hours;
        let minutes = timeDate.getMinutes();
        minutes = minutes >= 10 ? minutes : "0" + minutes;
        let seconds = timeDate.getSeconds();
        seconds = seconds >= 10 ? seconds : "0" + seconds;
        let week = timeDate.getDay();
        let weekArr = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];

        this.nowTime = `${year}-${mounth}-${day} ${weekArr[week]} ${hours}:${minutes}:${seconds}`;
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.isLoading = false;
      }, 2000);
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>
<style lang="less" scoped>
.bg {
  background-image: url("../../assets/img/bg.png");
  background-size: 100% 100%;
  background-color: #030409;
  box-shadow: 0 0 3px blue;
  color: #fff;
  width: 100%;
  height: 100vh;
}

.nowtime {
  position: absolute;
  right: 100px;
  top: 5px;
}
</style>
